import React, { useState } from 'react'
import '../css/Lbx_Wdxc.css'
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

export default function Wdxc() {
    let navigate = useNavigate()
    let [flag, setFlag] = useState(0)
    return (
        <div id='wdxc'>
            <div className='top'>
                <div className='shang'>
                    <LeftOutline onClick={() => { navigate(-1) }} /><div>我的行程</div><div className='kfp' onClick={() => { navigate('/kfp') }}>开发票</div>
                </div>
                <div className='xia'>
                    <div className={flag === 0 ? 'active' : ''} onClick={() => { setFlag(0) }}>全部</div>
                    <div className={flag === 1 ? 'active' : ''} onClick={() => { setFlag(1) }}>待评价</div>
                </div>
            </div>
            {
                !flag ? <div className='list'>
                    <li onClick={() => { navigate('/wdxc2?id=1') }}>
                        约车 6月24日 10:00<div className='y'>进行中</div><span>＞</span>
                        <div className='p'><div className='b'>●</div>越秀财富世纪广场-停车场</div>
                        <div className='p'><div className='g'>●</div>大江苑</div>
                    </li>
                    <li onClick={() => { navigate('/wdxc2?id=2') }}>
                        约车 6月24日 10:00<div className='y'>进行中</div><span>＞</span><span className='qzf'>去支付</span>
                        <div className='p'><div className='b'>●</div>越秀财富世纪广场-停车场</div>
                        <div className='p'><div className='g'>●</div>大江苑</div>
                    </li>
                    <li onClick={() => { navigate('/wdxc2?id=3') }}>
                        约车 6月24日 10:00<div className='f'>已取消</div><span>＞</span>
                        <div className='p'><div className='b'>●</div>越秀财富世纪广场-停车场</div>
                        <div className='p'><div className='g'>●</div>大江苑</div>
                    </li>
                    <li onClick={() => { navigate('/wdxc2?id=4') }}>
                        约车 6月24日 10:00<div className='f'>已完成</div><span>＞</span>
                        <div className='p'><div className='b'>●</div>越秀财富世纪广场-停车场</div>
                        <div className='p'><div className='g'>●</div>大江苑</div>
                    </li>
                </div> : <div className='list'>
                    <li onClick={() => { navigate('/wdxc2?id=4') }}>
                        约车 6月24日 10:00<div className='f'>已完成</div><span>＞</span>
                        <div className='p'><div className='b'>●</div>越秀财富世纪广场-停车场</div>
                        <div className='p'><div className='g'>●</div>大江苑</div>
                    </li>
                </div>
            }
        </div>
    )
}
